<template>
  <div class="edit-page-div payment-term">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="收款方式" />
      
    <view class="back" :style="{top: statusBarHeight + 'px'}" @click="backClick()"></view>
    <div class="payment-card div-sizing">
      <div class="u-flex u-ju-around u-ali-center" style="padding-top: 100rpx;">
        <div class="flex-between-center tab-title" :class="active == 1 ? 'pay-img-ac' : ''" @click.stop="activeBtn(1)">
          <div class="pay-img-div">
            <image src="../../assets/mine/alipay-ac.png" class="pay-img" v-if="active == 1" mode=""></image>
            <image src="../../assets/mine/alipay.png" alt="" class="pay-img" v-else></image>
          </div>
          <span>支付宝</span>
        </div>
        <div class="flex-between-center tab-title" :class="active == 2 ? 'pay-img-ac' : ''" @click.stop="activeBtn(2)">
          <div class="pay-img-div">
            <image v-if="active == 2" class="pay-img" src="../../assets/mine/wechat-ac.png" mode=""></image>
            <image v-else class="pay-img" src="../../assets/mine/wechat.png" mode=""></image>
          </div>
          <span>微信</span>
        </div>
        <div class="flex-between-center tab-title" :class="active == 3 ? 'pay-img-ac' : ''" @click.stop="activeBtn(3)">
          <div class="pay-img-div">
            <image src="../../assets/mine/bank-ac.png" alt="" class="pay-img" v-if="active == 3"></image>
            <image src="../../assets/mine/bank.png" alt="" class="pay-img" v-else></image>
          </div>
          <span>银行卡</span>
        </div>
        <div class="flex-between-center tab-title" :class="active == 4 ? 'pay-img-ac' : ''" @click.stop="activeBtn(4)">
          <div class="pay-img-div">
            <image src="../../assets/mine/usdt-ac.png" class="pay-img" v-if="active == 4"></image>
            <image src="../../assets/mine/usdt.png" alt="" class="pay-img" v-else></image>
          </div>
          <span>USDT</span>
        </div>
      </div>
      <div v-if="active == 1">
        <u--form>
          <div v-if="pay.is_up === 0" class="k-ewm-div">
            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="3"
              class="camera-btm-div">
            </u-upload>
            <span>添加支付宝收款码</span>
          </div>
          <div class="">
            <div>支付宝姓名</div>
            <u--input v-model="pay.name" name="name" clearable :disabled="pay.is_up === 1" placeholder="请输入支付宝姓名">
            </u--input>
          </div>
          <div class="">
            <div>支付宝账号</div>
            <u--input v-model="pay.account_num" name="account_num" clearable label="支付宝号" :disabled="pay.is_up === 1"
              placeholder="请输入支付宝账号">
            </u--input>
          </div>
          <div class="" v-if="pay.is_up === 0">
            <div>安全密码</div>
            <u--input v-model="pay.password" name="password" type="password" maxlength="6" clearable label="安全密码"
              placeholder="请输入安全密码">
            </u--input>
          </div>

          <div class="vant-btn div-sizing" v-if="pay.is_up === 0">
            <u-button type="primary" @click="onSubmit">
              确认并保存
            </u-button>
          </div>
        </u--form>
      </div>
      <div v-if="active == 2">
        <u--form>
          <div class="sk-ewm-div" v-if="pay.is_up === 0">
            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="3"
              class="camera-btm-div">
            </u-upload>
            <span v-if="pay.is_up === 0">添加微信收款码</span>
          </div>
          <div>
            <div>微信昵称</div>
            <u--input v-model="pay.name" clearable label="微信昵称" :disabled="pay.is_up === 1" placeholder="请输入微信昵称">
            </u--input>
          </div>
          <div class="">
            <div>微信账号</div>
            <u--input v-model="pay.account_num" clearable :disabled="pay.is_up === 1" placeholder="请输入微信账号">
            </u--input>
          </div>
          <div class="" v-if="pay.is_up === 0">
            <div>安全密码</div>
            <u--input v-model="pay.password" type="password" maxlength="6" clearable label="安全密码" placeholder="请输入安全密码">
            </u--input>
          </div>

          <div v-if="pay.is_up === 0" class="vant-btn div-sizing">
            <u-button type="primary" @click="onSubmit">
              确认并保存
            </u-button>
          </div>
        </u--form>
      </div>
      <div v-if="active == 3">
        <u--form class="bank-form">
          <div>
            <div>开户行</div>
            <u--input v-model="pay.account_num" name="account_num" :disabled="pay.is_up === 1" clearable label="开户行"
              placeholder="请输入xx银行xx支行">
            </u--input>
          </div>
          <div>
            <div>持卡人姓名</div>
            <u--input v-model="pay.name" name="name" clearable label="持卡人姓名" :disabled="pay.is_up === 1"
              placeholder="请输入持卡人姓名">
            </u--input>
          </div>
          <div>
            <div>银行卡号</div>
            <u--input v-model="pay.bank_num" type="digit" name="bank_num" :disabled="pay.is_up === 1" clearable
              label="银行卡号" placeholder="请输入银行卡号">
            </u--input>
          </div>
          <div class="">
            <div>手机号</div>
            <u--input v-model="pay.tel" type="digit" name="mobile" :disabled="pay.is_up === 1" clearable label="手机号"
              placeholder="请输入手机号">
            </u--input>
          </div>
          <div v-if="pay.is_up === 0">
            <div>安全密码</div>
            <u--input v-model="pay.password" name="password" type="password" maxlength="6" clearable label="安全密码"
              placeholder="请输入安全密码">
            </u--input>
          </div>

          <div v-if="pay.is_up === 0" class="div-sizing">
            <u-button type="primary" @click="onSubmit">
              确认并保存
            </u-button>
          </div>
        </u--form>
      </div>

      <div v-if="active == 4">
        <u--form class="usdt-form">
          <div class="row-item">
            <div class="row-name">币种</div>
            <div class="row-cell div-sizing">USDT</div>
          </div>
          <div class="row-item">
            <div class="row-name">链名称</div>
            <div class="flex-between-center row-cell-list">
              <div class="cell-item cell-item-ac" @click="changeType(index)">TRC-20</div>
            </div>
            <div class="sk-ewm-div" v-if="pay.is_up === 0">
              <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="3"
                class="camera-btm-div">
              </u-upload>
              <span v-if="pay.is_up === 0">添加USDT收款码</span>
            </div>
            <u--input :disabled="pay.is_up === 1" v-model="pay.adress" rows="2" name="adress" autosize label="充币地址："
              type="textarea" maxlength="100" placeholder="请输入地址" show-word-limit
              :rules="[{ required: true, message: '请填写验证码' }]" />
            <u--input class="van-pass" v-model="pay.password" name="password" type="password" maxlength="6" clearable
              label="安全密码：" v-if="pay.is_up === 0" placeholder="请输入安全密码"
              :rules="[{ required: true, message: '请填写' }]" />
            <div class="vant-btn div-sizing" v-if="pay.is_up === 0">
              <u-button type="primary" @click="onSubmit">
                确认并保存
              </u-button>
            </div>
          </div>
        </u--form>
      </div>
    </div>



    <!--    
    <!-- </div> -->
    <!-- </div> -->
    <!-- <div class="payment-term-div div-sizing">
      风险提示
      <div class="payment-card div-sizing">
        <div class="deal-info-sell-top">
          <van-icon name="fail" class="sell-ts" />
          <span>风险提示</span>
        </div>
        <div class="deal-info-ts" v-html="content" />
      </div>
    </div> -->
  </div>
</template>

<script>
  import {
    getReceiveMoneyWayIndex,
    putReceiveMoneyWay,
    userCode,
    download
  } from '@/api/deal/index.js'
  import {
    url_config
  } from '@/common/config.js'

  export default {
    data() {
      return {
        content: '<p>1.收款方式绑定后无法修改。请谨慎处理！</p><p>2.如有疑问请联系人工客服。</p><p>3.⽀付宝和银⾏卡收款⽅式必填</p>',
        active: 1,
        fileList1: [],
        pay: {
          tel: '',
          account_num: '',
          name: '',
          receive_qrcode: '',
          code: '',
          adress: '',
          password: '',
        },
        time: '',
        setInt: '', // 验证码倒计时
        imageY: '', // 预览路径
        payList: [1, 1, 1, 1],
        acIndex: 0,
        statusBarHeight: 0
      }
    },
    onLoad() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 30;
      this.get_info()
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      onSubmit(values) {
        // console.log(12312313);
        const vm = this
        if (vm.active !== '3') {
          if (vm.imageY === '') {
            vm.$ui.toast('请上传收款码')
            return
          }
        }
        values.password = vm.$md5(values.password)
        values.receive_qrcode = vm.pay.receive_qrcode
        values.type = vm.active
        putReceiveMoneyWay(values).then(res => {
          if (res.code === 1) {
            vm.$ui.toast('操作成功')
            setTimeout(() => {
              // vm.$router.goBack()
              vm.time = ''
              clearInterval(this.setInt)
              vm.get_info()
            }, 1000)
          }
        })
      },
      activeBtn(index) {
        this.$ui.loading('加载中')
        this.active = index;
        this.get_info()
      },
      // tab change
      changeTab(index) {
        this.get_info()
        this.imageY = ''
      },
      changeType(index) {
        this.acIndex = index
      },
      // 查询信息
      get_info() {
        getReceiveMoneyWayIndex({
          type: this.active
        }).then(res => {
          if (res.code === 1) {
            const pay = res.data
            if (typeof pay === 'object') {
              this.pay = pay
              this.imageY = pay.receive_qrcode || ''
            } else {
              this.pay = {}
            }
          }
          uni.hideLoading()
        })
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // this.$util.picture(file).then(res => {
        //   if (res.code === 1) {
        //     this.pay.receive_qrcode = res.url
        //     this.imageY = res.content
        //   }
        // })
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 128736178236718);
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        console.log(url, );
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${url_config}/api/upload/upload`, // 仅为示例，非真实的接口地址
            filePath: url,
            header: {
              'Accept': '*/*',
              'Content-Type': 'multipart/form-data'
            },
            formData: {
              file: url,
              token: this.$ui.getStorage('token') || 'none'
            },
            success: (res) => {
              console.log(res, 18237189);
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
    },
    // 获取状态是否设置支付密码
    // get_status () {
    //   receiveMoneyWay().then(res => {
    //     if (res.code === 1) {
    //       this.payList = res.data
    //     }
    //   })
    // },
    // 验证中文姓名
    validatorName() {
      const vm = this
      if (!vm.$valid.isRealName(vm.pay.name)) {
        this.$ui.toast('请输入真实姓名(中文)')
        return false
      } else {
        return true
      }
    },

    // 电话验证
    validatorMobile(value) {
      if (value.length !== 11) {
        this.$ui.toast('请输入11位电话号码')
        return false
      } else {
        return true
      }
    },
    sendCode() {
      if (this.time === '') {
        userCode({}).then(res => {
          if (res.code === 1) {
            this.$ui.toast(res.msg)
            this.time = 60
            this.setInt = setInterval(() => {
              if (this.time === 1) {
                this.time = ''
                clearInterval(this.setInt)
              } else {
                this.time -= 1
              }
            }, 1000)
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>
  .payment-term {
    width: 100%;
    // padding: 40rpx 0;
    position: absolute;
    overflow-y: scroll;

    .payment-card {
      width: 100%;
      min-height: 100vh;
      padding: 0;
      margin-bottom: 0;
      border-radius: 10rpx;
      background: #ffffff;

      .tab-title {
        height: 190rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        // color: rgba(#282828,.5);
        // .pay-img{
        //   width: 40rpx;
        //   height: 40rpx;
        //   margin-right: 20rpx;
        // }
        .pay-img-div {
          width: 120rpx;
          height: 120rpx;
          border-radius: 4rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          // background: #F5F5F5;
          .pay-img {
            width: 120rpx;
            height: 120rpx;
            margin-bottom: 34rpx;
          }
        }
      }

      .pay-img-ac {
        color: #12a3e4;

        .pay-img-div {
          // background: #282828;
        }
      }

      .u--form {
        padding: 0 40rpx;

        .van-cell {
          padding: 20rpx 0;
        }
      }

      .bank-form {
        margin-top: 200rpx;
      }

      .usdt-form {
        padding: 40rpx 20rpx 0;

        .row-item {
          margin-bottom: 50rpx;

          .row-name {
            color: #000000;
            margin-bottom: 22rpx;
          }

          .row-cell {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            padding: 0 20rpx;
            color: #5B5B5B;
            font-size: 32rpx;
            border-radius: 6rpx;
            background: #F1F1F1;
          }

          .row-cell-list {
            justify-content: flex-start;
            overflow-x: scroll;
            padding-bottom: 20rpx;

            .cell-item {
              width: 160rpx;
              height: 64rpx;
              line-height: 64rpx;
              color: #2D2D2D;
              text-align: center;
              background: #F1F1F1;
              border-radius: 6rpx;
              margin-right: 24rpx;
              flex-shrink: 0;
            }

            .cell-item-ac {
              border: 1rpx solid #12A3E4;
              color: #12A3E4;
              background: none;
            }
          }
        }

        .sk-ewm-div {
          margin: 38rpx 0 68rpx;
        }

        .vant-btn {
          padding: 0 20rpx;
          margin-top: 60rpx;
        }
      }

      .sk-ewm-div {
        margin-top: 70rpx;

        span {
          color: #818090;
          font-size: 24rpx;
        }
      }

      .ewm-j {
        width: 116rpx;
        height: 108rpx;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .vant-btn {
        position: static;
        margin: 30rpx 0;

        .u-button {
          width: 100%;
          // background: #3A9B13;
          border-radius: 40rpx;
        }
      }
    }

    .payment-term-div {
      padding: 0 40rpx;

      .payment-card {
        padding: 20rpx;
        background: #f6f6f6;
        border-radius: 12rpx;
      }
    }

    .ewm-div {
      width: 386rpx;
      height: 386rpx;
      border-radius: 4rpx;
      background-color: #fafafa;
    }

    // 风险提示
    .deal-info-sell-top {
      display: flex;
      align-items: center;
      font-size: 28rpx;
    }

    .sell-ts {
      width: 29rpx;
      height: 29rpx;
      line-height: 29rpx;
      text-align: center;
      font-size: 26rpx;
      background: #ff4400;
      color: #ffffff;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .deal-info-ts {
      font-size: 24rpx;
      margin-top: 10rpx;
      line-height: 40rpx;
    }
  }
</style>

<style lang="less">
  .payment-term {
    .van-tabs__nav--card {
      height: auto;
      margin: 0;
      border: 0;
    }

    .van-tab {
      border: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #282828 !important;
    }

    .van-tab--active {
      background-color: #f8f8f8 !important;
      // border-bottom: 2rpx solid #2760EB;
      background-color: rgba(#282828, 0) !important;
      // span{
      //   color: #ffffff;
      // }
    }

    .van-tabs__content,
    .van-sticky {
      // padding: 0 24rpx;
    }

    .van-sticky {
      padding: 0 24rpx;
      // border-bottom: 2rpx solid #F6F6F6;
    }

    .u--input__button {
      .red-code {
        padding: 0;
        width: 164rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 40rpx;
        color: #ed2632;
        border-color: #ed2632;
        font-size: 28rpx;
        text-align: center;
        display: inline-block;
      }

      .red-code-wait {
        // background: none;
        // color: #282828;
      }
    }

    .usdt-form {
      .van-cell {
        border: none;

        .u--input__label {
          width: 160rpx;
        }

        .van-cell__value {
          flex: none;
          width: 480rpx;
          padding: 14rpx;
          box-sizing: border-box;
          border: 1rpx solid rgba(#8D8D8D, .6);
          border-radius: 10rpx;
        }

        .u--input__control {
          width: 100%;
        }
      }

      // .van-pass{
      //   .u--input__label{
      //     line-height: 1.17rem;
      //   }
      // }
    }
  }

  .camera-btm-div {
    // width: 192rpx;
    // height: 192rpx;
  }

  .u-border {
    border-bottom: 1rpx solid #fafafa;
  }
</style>
